<template>
        <div class="article">
            <div class="check-box"><van-checkbox v-model="props.isChecked"></van-checkbox></div>
            <div class="article-content">
                <div class="article-ID">文章id:{{ state._id }}</div>
                <div class="article-writter">作者id:{{ state.authorId }} </div>
                <div class="article-title">标题:{{ state.title }}</div>
                <div class="content">内容：{{ state.content }}</div>
                <img class="passicon" src="../assets/icons/pass.png" alt="" v-show=state.isPassed>
            </div>
            <div class="article-image">
                <img :src=state.ImgUrl alt="">
            </div>
        </div>
        
</template>

<script setup>
import {watch} from 'vue'
import { useStore } from "vuex"
    const props = defineProps({
        isChecked:{
            type:Boolean,
            default:false
        },
        state:{
            type:Object,
            default:{}
        }
    })

    const store = useStore()
    //监听当前item是否被选中，选中则加入仓库的选中数组
    watch(()=>props.isChecked, (curr, prev) => {
        if(curr == true){
            store.dispatch('addArticleAction',props.state._id)

        }else{
            store.dispatch('deleteArticleAction',props.state._id)
        }
    })
</script>

<style lang="less" scoped>
.article{
    display: flex;
    border-bottom: 2px solid #d2d2d2;
    height: 80px;
    padding: 4px 0;
    .check-box{
        width: 50px;
        display: flex;
        justify-content: center;
        align-content: center;
    }
    .article-content{
        text-align: left;
        width: 255px;
        text-overflow: ellipsis;
        position: relative;
        padding-bottom: 5px;
        div{
            margin: 4px;
        }
        .content{
            max-height: 28px;
            line-height: 14px;
            display: -webkit-box;
            text-overflow: ellipsis;
            overflow: hidden;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;//当属性值为3，表示超出3行隐藏
        }
        .passicon{
            position: absolute;
            width: 40px;
            height: 40px;
            right: 0px;
            top: 4px;
        }
    }
    .article-image{
        width: 60px;
        height: 80px;
        margin-left: 5px;
        text-align: center;
        img{
            margin-top: 5px;
            width: 90%;
            height: 85%;
        }
    }
}
</style>